<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			 //作业
		//1、实现将鼠标移动到指定的图片位置时，出现大图片预览
			$(function(){
			$("#img").mousemove(function(e){
				//获取一个跟随鼠标移动的div
				$("#mouseXY").show().css({ "position": "absolute", "left": e.pageX , "top": e.pageY });
				
				//显示图片
				$("#div2").show(function(){
					$("#div2").css("background-position-x",-(e.pageX*4));
					$("#div2").css("background-position-y",-(e.pageY*4))
				});
				
				
			})
			$("#img").mouseleave(function(){
				
				//离开图片隐藏div
				$("#mouseXY").hide();
			})
				//隐藏图片
				$("#div2").hide();
				
			})
			

		</script>
		<style type="text/css">
			#img{
				width: 200px;
				height: 130px;
			}
			#img2{
				/*width: 500px;
				height: 200px;*/
				display:none;
			}
			#mouseXY{
				width: 60px;
				height: 40px;
				
				z-index:100;
				display:none;
			}
			#div2{
				
				height: 400px;
				width: 400px;
				display:none;
				background-image:url(../img/Tu02.jpg);
				background-repeat: no-repeat;
				background-size: 800px;
			}
		</style>
	</head> 
	<body>
		<div id="">
			<img id="img" src="../img/Tu02.jpg"/>
			<div id="mouseXY">
				
			</div>
		</div>
		<div id="div2">
			
		</div>
		
	</body>
</html>
